extends ../layout

block scripts
  link(rel='stylesheet', href='/admin/css/codemirror.css')
  style.
    section {
      width: 100%;
    }
    div#one {
      width: 50%;
      height: 95%;
      float:left;
    }
    div#two {
      width: 50%;
      height: 95%;
      overflow:hidden;
    }
    iframe {
      width:100%;
      border:0;
      height: 500px;
    }
    .CodeMirror {
      height: 100%;
      background: white;
    }


block content
  h1.page-header Actualizar
  .row.placeholders
    button(onclick='render()') Renderizar
    button(onclick='guardar()') Guardar
    br
    section
      #one
        textarea#textarea= softwareData

      #two
        iframe#iframe
    script(src='/admin/js/codemirror.js')
    script(src='/admin/js/javascript.js')
    script.
      var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("textarea"),{
      extraKeys: {
        "Ctrl-S": function(instance) { alert("Guardado"); },
        "Ctrl-Enter": function(instance) {render()}
      }
      });
      myCodeMirror.refresh()
      myCodeMirror.setSize("100%", "100%");
    script.
      function render(){
        var code = "var code = ("+myCodeMirror.getValue()+")();\n";
        var renderCall = 'render(code,document.getElementById("opciones"))\n';
        var nodo = 'nodo = { id : "0" , configurado : code};\n';
        var result = '<html><head></head><body><button onclick="display()">Generate command</button><br\/\><p id="command"></p>'+
              '<div id="opciones"></div>'+
              '<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"><\/script>'+
              '<script type="text/javascript" src="/admin/js/render.js"><\/script>'+
              '<script type="text/javascript">'+code+renderCall+nodo+'<\/script>'+
              '<\/body><\/html>';
        var iframe = document.getElementById('iframe');

        if(iframe.contentDocument) doc = iframe.contentDocument;
        else if(iframe.contentWindow) doc = iframe.contentWindow.document;
        else doc = iframe.document;

        doc.open();
        doc.writeln(result);
        doc.close();
      }
      function guardar(){
        var result =myCodeMirror.getValue();
        $.ajax({
          type: "POST",
          url: "/admin/software/update/!{software._id}",
          data: {
            data : result
          },
          success: function(data, status,jqXHR){
            if(status === "success"){
              console.log(arguments);
            }
         }
        });
      }